
// import React, { useState } from 'react';
// import React from 'react'
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { connect } from 'react-redux'
import style from './style.module.css'

import { Table, Select,Breadcrumb, Modal, Space, Switch, Dropdown, Input, Button, message, Upload } from 'antd'

import Pictures from '../../../components/Upload/index.jsx'

const SpikeGoods = () => {
    const { Option } = Select
    const [data, setData] = useState([])
    const [isModalVisible, setIsModalVisible] = useState(false);

    // 获取数据
    useEffect(() => {
        axios({
            url: '/api/killlist',
            method: 'post',
        }).then(res => {
            setData(res.data.res)
        })
    }, []);
    // 删除
    const handleDel = (id) => {
        axios({
            url: `/api/shopdelete/${id}`,
            method: 'delete'
        }).then(res => {
            axios({
                url: '/api/killlist',
                method: 'get',
            }).then(res => {
                setData(res.data.res)
            })
            message.info('删除成功');
        })
    }
    // 修改状态
    const handleEdit = (record) => {
        console.log(record);
        if (record.state == '1') {
            record.state = 0
        } else {
            record.state = 1
        }
        axios({
            url: '/api/shopedit',
            method: 'put',
            data: {
                id: record.id,
                state: record.state,
                title: record.title,
                kills: record.kills,
                configuration: record.configuration,
                img: record.img,
                content: record.content,
                original: record.original,
                price: record.price,
                limits: record.limits,
                limitstate: record.limitstate,
                create_time: record.create_time
            }
        }).then(res => {
            message.info('修改成功');
        })
    }
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            width: '70px',
            align: 'center',
        },
        {
            title: '配置',
            dataIndex: 'configuration',
            key: 'configuration',
            // width:'95px',
            align: 'center',
        },
        {
            title: '秒杀时段',
            dataIndex: 'kills',
            key: 'kills',
            // width:'120px',
            align: 'center',
        },
        {
            title: '商品图片',
            dataIndex: 'img',
            key: 'img',
            // width:'110px',
            align: 'center',
            render: (text, record) => (
                <img src={record.img} alt="" />
            ),
        },
        {
            title: '活动标题',
            dataIndex: 'title',
            key: 'title',
            // width:'130px',
            align: 'center',
        },
        {
            title: '活动简介',
            dataIndex: 'content',
            key: 'content',
            // width:'180px',
            align: 'center',
        },
        {
            title: '原价',
            dataIndex: 'original',
            key: 'original',
            // width:'80px',
            align: 'center',
        },
        {
            title: '秒杀价',
            dataIndex: 'killprice',
            key: 'killprice',
            // width: '80px',
            align: 'center',
        },
        {
            title: '限量',
            dataIndex: 'limits',
            key: 'limits',
            // width: '80px',
            align: 'center',
        },
        {
            title: '限量剩余',
            dataIndex: 'limits',
            key: 'limits',
            // width: '100px',
            align: 'center',
        },
        {
            title: '秒杀状态',
            dataIndex: 'limitstate',
            key: 'limitstate',
            // width: '100px',
            align: 'center',
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
            // width: '100px',
            align: 'center',
            render: (text, record) => (
                <Switch onClick={() => handleEdit(record)} defaultChecked={record.state} checkedChildren="开启" unCheckedChildren="关闭" />
            ),
        },
        {
            title: '创建时间',
            dataIndex: 'create_time',
            key: 'create_time',
            // width:'120px',
            align: 'center',
        },
        {
            title: '操作',
            key: 'action',
            // width: '120px',
            align: 'center',
            render: (text, record) => (
                <Space size="middle">
                    <a onClick={() => handleEditlist(record)}>编辑</a>
                    <a onClick={() => handleDel(record.id)}>删除</a>
                </Space>
            ),
        },
    ];
    const [stateOpen, setstateOpen] = useState('') //状态
    const [double, setDouble] = useState('')
    // 搜索
    const handleSearch = (value) => {
        console.log(stateOpen, '123');
        console.log(double,'567');
        axios({
            url: '/api/killlist',
            method: 'post',
            data: {
                title: value.target.defaultValue,
                state: stateOpen,
                killstate: double
            }
        }).then(res => {
            setData(res.data.res)
            console.log(res);
        })
    }
     // 双十一筛选
     const handleShop = (killstate) => {
        setDouble(killstate)
        axios({
            url: '/api/killlist',
            method: 'post',
            data: {
                killstate,
                state:stateOpen
            }
        }).then(res => {
            setData(res.data.res)
            console.log(res);
        })
    }
    // 筛选
    const handleoption = (state) => {
        setstateOpen(state)
        axios({
            url: '/api/killlist',
            method: 'post',
            data: {
                state,
                killstate:double
            }
        }).then(res => {
            setData(res.data.res)
            console.log(res);
        })
    }
   


    const [configuration, setconfiguration] = useState("")  //配置
    const [kills, setkills] = useState("")  //时间
    const [img, setimg] = useState("")   //图片
    const [title, settitle] = useState("")  //标题
    const [content, setcontent] = useState("")  //简介
    const [original, setoriginal] = useState("")//原价
    const [killprice, setkillprice] = useState("") //秒杀价
    const [limits, setlimits] = useState("")  //限量  限量剩余
    const [limitstate, setlimitstate] = useState("")  //秒杀状态
    const [create_time, setcreate_time] = useState("")  //时间
    const [state, setstate] = useState("")  //状态
    const [id, setid] = useState("")  //id
    const [killstate, setkillstate] = useState("")
    const [shopclass, setshopclass] = useState("")

    const handleEditlist = (value) => {
        console.log(value);
        setIsModalVisible(true);
        setid(value.id)
        setconfiguration(value.configuration)
        setkills(value.kills)
        setimg(value.img)
        settitle(value.title)
        setcontent(value.content)
        setcreate_time(value.create_time)
        setstate(value.state)
        setkillprice(value.killprice)
        setoriginal(value.original)
        setlimits(value.limits)

    };

    const handleOk = () => {
        console.log(id, 'id', killprice, configuration, state, 'state', 'killpeice', kills, '123');
        setIsModalVisible(false);
        axios({
            url: '/api/shopedit',
            method: 'put',
            data: {
                id,
                configuration,
                kills,
                img,
                title,
                content,
                original,
                killprice,
                limits,
                limitstate,
                create_time,
                state,
            }
        }).then(res => {
            axios({
                url: '/api/killlist',
                method: 'get',
            }).then(res => {
                setData(res.data.res)
            })
            message.info('编辑成功')
            console.log(res);
        })

    };
    const handleImg = (e) => {
        console.log(e, 'e');
        setimg(e.response)
    }
    const handleCancel = () => {
        setIsModalVisible(false);
    };

    return (
        <div className={style.spikeGoodsBox}>
            <div className={style.spikeGoodsBoxHeader}>
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>
                        <i className='iconfont icon-gengduo-2'></i>
                        <a href="/layout">主页</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        秒杀管理
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        秒杀商品
                    </Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div className={style.spikeGoodsBoxMain}>
                <div className={style.SpikeConfigBoxMainSearch}>
                    <div className={style.p}>
                        <b>是否显示</b>
                        <Select style={{ width: 120 }} onChange={handleoption}>
                            <Option value="1">开启 </Option>
                            <Option value="0">关闭</Option>
                        </Select>
                    </div>
                    <div className={style.title}>
                        <b>配置名称</b>
                        <Select style={{ width: 120 }} onChange={handleShop}>
                            <Option value="1">双11 </Option>
                            <Option value="0">双12活动</Option>
                        </Select>
                    </div>
                    <p>
                        <b>秒杀名称</b>
                        <Input placeholder=" 请输入商品名称，关键字，商品ID " onPressEnter={handleSearch} />
                    </p>
                </div>
                {/* 弹框 */}
                <Modal className={style.modal} title="列表" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    {/* <b><span>id:</span><Input type="text" value={id} onChange={(e) => setid(e.target.value)} /></b> */}
                    <b><span>配置:</span><Input type="text" value={configuration} onChange={(e) => setconfiguration(e.target.value)} /></b>
                    <b><span>秒杀时段:</span><Input type="text" value={kills} onChange={(e) => setkills(e.target.value)} /></b>
                    <b><span>活动标题:</span><Input type="text" value={title} onChange={(e) => settitle(e.target.value)} /></b>
                    <b><span>活动简介:</span><Input type="text" value={content} onChange={(e) => setcontent(e.target.value)} /></b>
                    <b><span>原价:</span><Input type="text" value={original} onChange={(e) => setoriginal(e.target.value)} /></b>
                    <b><span>秒杀价:</span><Input type="text" value={killprice} onChange={(e) => setkillprice(e.target.value)} /></b>
                    <b><span>限量:</span><Input type="text" value={limits} onChange={(e) => setlimits(e.target.value)} /></b>
                    <b><span>限量剩余:</span><Input type="text" value={limits} onChange={(e) => setlimits(e.target.value)} /></b>
                    <b><span>创建时间:</span><Input type="text" value={create_time} onChange={(e) => setcreate_time(e.target.value)} /></b>
                </Modal>
                <Table columns={columns} rowKey="id" dataSource={data} scroll={{ y: 560 }} />
            </div>
        </div>
    );
}

export default connect((state) => {
    return {

    }
})(SpikeGoods);
